import { ProTable, type ProColumns } from '@/components/Pro';
import {
  deviceControllerPageBoxBasicConfigOverview,
  deviceControllerPageBoxOverview,
} from '@/services/ess/deviceInfo';
import { useModel } from '@@/exports';
import { useIntl } from '@umijs/max';
import React, { useEffect } from 'react';
import Styles from './CommonStyle.less';
//
// type BoxViewType = {
//   label: string;
//   icon: ReactNode;
//   value: string;
//   unit: string;
// };
type IProps = {
  boxViewInfo?: API.PaginationDevicePageData;
};
const BoxView: React.FC<IProps> = (props) => {
  const intl = useIntl();
  const { boxViewInfo } = props;
  const { initialState } = useModel('@@initialState');

  // const BoxViewColumns: BoxViewType[] = [
  //   {
  //     label: '电池箱数量',
  //     icon: <span className={cls([iconFont.iconfont])}>&#xe8f4;</span>,
  //     value: 'boxCount',
  //     unit: '台',
  //   },
  //   {
  //     label: '总容量',
  //     icon: <span className={cls([iconFont.iconfont])}>&#xe8f7;</span>,
  //     value: 'capacity',
  //     unit: 'kWh',
  //   },
  //   {
  //     label: '总堆数',
  //     icon: <span className={cls([iconFont.iconfont])}>&#xe8f6;</span>,
  //     value: 'bmsCount',
  //     unit: '',
  //   },
  //   {
  //     label: '总簇数',
  //     icon: <span className={cls([iconFont.iconfont])}>&#xe8f5;</span>,
  //     value: 'clusterCount',
  //     unit: '',
  //   },
  //   {
  //     label: '总模组',
  //     icon: <span className={cls([iconFont.iconfont])}>&#xe8f4;</span>,
  //     value: 'bmuCount',
  //     unit: '',
  //   },
  //   {
  //     label: '单体数',
  //     icon: <span className={cls([iconFont.iconfont])}>&#xe8f9;</span>,
  //     value: 'cellCount',
  //     unit: '',
  //   },
  // ];
  // const [boxData, setBoxData] = useState<API.DeviceBoxInfo>({
  //   boxCount: 0,
  //   capacity: 0,
  //   capacityUnit: 'kWh',
  //   bmsCount: 0,
  //   clusterCount: 0,
  //   bmuCount: 0,
  //   cellCount: 0,
  // });
  // 实时采集概况

  const tableColumns: ProColumns[] = [
    {
      title: intl.formatMessage({ id: 'global.s/N' }),
      dataIndex: 'pageIndex',
      valueType: 'index',
    },
    {
      title: intl.formatMessage({ id: 'stationRealtimeMonitoring.deviceName' }),
      dataIndex: 'name',
      search: false,
    },
    {
      title: `${intl.formatMessage({ id: 'baseInfo.air' })}/${intl.formatMessage({
        id: 'baseInfo.liquid',
      })}`,
      dataIndex: 'coolType',
      search: false,
    },
    {
      title: `${intl.formatMessage({ id: 'bigdata.ratedPower' })}(kW)`,
      dataIndex: 'power',
      search: false,
    },
    {
      title: intl.formatMessage({ id: 'data.totalCharge' }),
      dataIndex: 'charge',
      search: false,
    },
    {
      title: intl.formatMessage({ id: 'data.totalDischarge' }),
      dataIndex: 'discharge',
      search: false,
    },
    {
      title: 'SOC(%)',
      dataIndex: 'soc',
      width: 70,
      search: false,
    },
    {
      title: intl.formatMessage({ id: 'equipmentMonitor.stackCluModCel' }),
      dataIndex: 'sumNum',
      search: false,
      width: 180,
      render: (_, record) => {
        return (
          <span>
            {record?.bmsCount || 0}-{record?.clusterCount || 0}-{record?.bmuCount || 0}-
            {record?.cellCount || 0}
          </span>
        );
      },
    },
    {
      title: intl.formatMessage({ id: 'equipmentMonitor.commissioningTime' }),
      dataIndex: 'startRunTime',
      search: false,
      width: 150,
    },
  ];
  const baseInfoColumns: ProColumns[] = [
    {
      title: intl.formatMessage({ id: 'global.s/N' }),
      dataIndex: 'pageIndex',
      valueType: 'index',
    },
    {
      title: intl.formatMessage({ id: 'equipmentMonitor.manufacturer' }),
      dataIndex: 'manufacturer',
    },
    {
      title: intl.formatMessage({ id: 'equipmentMonitor.equipmentModel' }),
      dataIndex: 'deviceModel',
      valueType: 'select',
    },
    {
      title: intl.formatMessage({ id: 'equipmentMonitor.equipmentQuantity' }),
      dataIndex: 'deviceCount',
    },
    {
      title: intl.formatMessage({ id: 'baseInfo.pcsType' }),
      dataIndex: 'typeDesc',
    },
    {
      title: `${intl.formatMessage({ id: 'bigdata.ratedCapacity' })}(kWh)`,
      dataIndex: 'ratedCapacity',
      render: (_, record) => {
        return <span>{record?.dcInfo?.ratedCap || '--'}</span>;
      },
    },
    {
      title: `${intl.formatMessage({ id: 'bigdata.ratedPower' })}(kW)`,
      dataIndex: 'ratedPower',
      render: (_, record) => {
        return <span>{record?.dcInfo?.ratedPower || '--'}</span>;
      },
    },
    {
      title: intl.formatMessage({ id: 'equipmentMonitor.stackCluModCel' }),
      dataIndex: 'sumNum',
      width: 170,
      render: (_, record) => {
        return (
          <span>
            {record?.bmsNum || 0}-{record?.clusterNum || 0}-{record?.bmuNum || 0}-
            {record?.cellNum || 0}
          </span>
        );
      },
    },
  ];

  useEffect(() => {
    if (boxViewInfo) {
      // setBoxData(boxViewInfo);
    }
  }, [boxViewInfo]);
  return (
    <>
      {/*<Flex justify={'space-between'}>*/}
      {/*{BoxViewColumns.map((item: BoxViewType) => {*/}
      {/*  return (*/}
      {/*    <Flex key={item.value}>*/}
      {/*      <Flex>*/}
      {/*        <div className={Styles.ColumnsIcon}>{item.icon}</div>*/}
      {/*        <div className={Styles.ColumnsText}>*/}
      {/*          <div className={Styles.ColumnsTextTitle}>{item.label}</div>*/}
      {/*          <span className={Styles.ColumnsTextContent}>*/}
      {/*            {boxData[item.value]}&nbsp;*/}
      {/*            {item.value === 'capacity' ? boxData.capacityUnit : item.unit}*/}
      {/*          </span>*/}
      {/*        </div>*/}
      {/*      </Flex>*/}
      {/*    </Flex>*/}
      {/*  );*/}
      {/*})}*/}
      {/*</Flex>*/}
      <ProTable
        style={{ marginBottom: '10px' }}
        title={() => {
          return (
            <div className={Styles.tableTitle} style={{ marginLeft: '-10px' }}>
              {' '}
              {intl.formatMessage({ id: 'equipmentMonitor.basicConfigurationFile' })}
            </div>
          );
        }}
        params={{
          stationId: initialState?.stationId,
        }}
        search={false}
        columns={baseInfoColumns}
        // dataSource={boxConfigInfo?.records}
        rowKey={'pageIndex'}
        request={deviceControllerPageBoxBasicConfigOverview}
      ></ProTable>
      <div className={Styles.divider}></div>
      <ProTable
        title={() => {
          return (
            <div className={Styles.tableTitle} style={{ marginLeft: '-10px' }}>
              {' '}
              {intl.formatMessage({ id: 'equipmentMonitor.realTimeCollectionOverview' })}
            </div>
          );
        }}
        params={{
          stationId: initialState?.stationId,
        }}
        rowKey={'pageIndex'}
        columns={tableColumns}
        search={false}
        // dataSource={boxViewInfo?.records}
        style={{ marginTop: '30px' }}
        request={deviceControllerPageBoxOverview}
      ></ProTable>
    </>
  );
};

export default BoxView;
